<template>
  <div class="myShop">
    <van-nav-bar title="我的订单" left-arrow @click-left="$router.history.go(-1)">
      <span slot='left' class="topleftIcon"><img src='../../../public/images/qt_75.png'/></span>
    </van-nav-bar>
    <div class="contentNav">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        finished-text="没有更多了"
        :immediate-check="false"
        :offset='50'>
          <van-tabs v-model="active" animated @click="tabsClick">
            <van-tab title="全部订单">
              <div :class="{'shop order_jy':item.orderStatus=='1','shop order_wc':item.orderStatus=='2'}" v-for='(item,index) in order' :key='index' @click='$router.push({path:"orderDetail1",query:{id:item.curOrderId,status:item.orderStatus}})'>
              <!-- <div class="shop"> -->
                <div class="peopleMessage">
                  <img src='http://test.jxcraft.net/guan.jpg' class="mPic" @click.stop='$router.push({path:"otherUser",query:{userId:item.commodity.userId}})'/>
                  <div class="news">
                    <h3 class="hide_other">这是 商品描述</h3>
                    <p><img src="../../../public/images/huizhang.png"/> 信用值&nbsp40</p>
                  </div>
                  <div class="clear"></div>
                </div>
                <div class="shopMessage">
                  <img :src='item.commodity.images'/>
                  <div  class="name">
                    <div>
                      <p class="hide_other l ">{{item.commodity.title}}</p>
                      <div class="publicTags l">{{item.commodity.quality}}</div>
                      <div class="clear"></div>
                    </div>
                    <p class="price">￥{{item.commodity.price}}</p>
                  </div>
                  <div class="clear"></div>
                </div>
                <div class="btn">
                  <div class="btnCommon comment" v-if="item.orderStatus=='2'" @click.stop="$route.push({path:'comment',query:{orderId:item.curOrderId}})">评论</div>
                  <div class="btnCommon del" v-if="item.orderStatus=='2'" >删除</div>
                </div>
              </div>
            </van-tab>
            <van-tab title="交易中">
              <div slot="title">
                交易中<span class="huizhang">{{numbers}}</span>
              </div>
              <div>
                <div class="shop order_jy" v-for='(item,index) in order' :key='index' @click='$router.push({path:"orderDetail1",query:{id:item.curOrderId,status:item.orderStatus}})'>
              <!-- <div class="shop"> -->
                <div class="peopleMessage">
                  <img src='http://test.jxcraft.net/guan.jpg' class="mPic"  @click.stop='$router.push({path:"otherUser",query:{userId:item.commodity.userId}})'/>
                  <div class="news">
                    <h3 class="hide_other">这是 商品描述</h3>
                    <p><img src="../../../public/images/huizhang.png"/> 信用值&nbsp40</p>
                  </div>
                  <div class="clear"></div>
                </div>
                <div class="shopMessage">
                  <img :src='item.commodity.images'/>
                  <div  class="name">
                    <div>
                      <p class="hide_other l ">{{item.commodity.title}}</p>
                      <div class="publicTags l">{{item.commodity.quality}}</div>
                      <div class="clear"></div>
                    </div>
                    <p class="price">￥{{item.commodity.price}}</p>
                  </div>
                  <div class="clear"></div>
                </div>
                <div class="btn">
                  <div class="btnCommon comment" v-if="item.orderStatus=='2'" @click.stop="$route.push({path:'comment',query:{orderId:item.curOrderId}})">评论</div>
                  <div class="btnCommon del" v-if="item.orderStatus=='2'" >删除</div>
                </div>
              </div>
              </div>
            </van-tab>
            <van-tab title="已完成">
              
            </van-tab>
            <van-tab title="已取消">
             
            </van-tab>
          </van-tabs>
        </van-list>
    </div>


  </div>
</template>

<script>
import storage from '@/common/store'
export default {
  data(){
    return{
      active:0,
      loading: false,
      finished: false,
      page:1,
      size:10,
      order:[],
      userId:storage.getItem('userInfo').userId,
      numbers:0,
    }
  },
  created(){
    this.getMessage();
  },
  methods:{
    getMessage(){
      this.$get(this.$api.user.orders,{size:this.size,page:1,status:this.active,userId:this.userId}).then(data=>{
        let num=0;
        data.data.curPageData.forEach((item,index)=>{
          if(this.active==0 && item.orderStatus==1){
            num++;
            this.numbers=num;
          }
          data.data.curPageData[index].commodity.images=JSON.parse(item.commodity.images)[0];
        });
        this.order=data.data.curPageData;
        
        this.page=2;
      })
    },
    tabsClick(name,title){
      this.order=[];
      this.getMessage();
      console.log(this.active)
    },
    onLoad() {
      setTimeout(() => {
        this.$get(this.$api.user.orders,{size:this.size,page:this.page,status:this.active,userId:this.userId}).then(data=>{
          console.log((Number(this.page)-1)*this.size,data.data.totalNum)
          if((Number(this.page)-1)*this.size<data.data.totalNum){
          // if((this.page-1)*this.size<data.data.totalNum){
            data.data.curPageData.forEach((item,index)=>{
              data.data.curPageData[index].images=JSON.parse(item.images)[0];
            });
            for (let i = 0; i < data.data.curPageData.length; i++) {
              this.order.push(data.data.curPageData[i]);
            };
            console.log(this.order);
            this.loading = false;
          }else{
            this.loading = false;
            this.finished  = true;
            console.log(this.finished)
          }
          this.page++;
        })
      }, 500);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .myShop{background-color:#f5f5f5; }
  .shop{padding: 0.23rem 0.26rem;position: relative;background-color: #fff;margin-top: 0.2rem;}
  .order_jy::before{content: '交易中';background-color: #4aace9;width: 0.88rem;height: 0.42rem;text-align: center;border-bottom-left-radius: 0.21rem;font: 0.2rem/0.42rem '微软雅黑';position: absolute;right: 0;top: 0;color: #fff;}
  .order_wc::before{content: '已完成';background-color: #CCCCCC;width: 0.88rem;height: 0.42rem;text-align: center;border-bottom-left-radius: 0.21rem;font: 0.2rem/0.42rem '微软雅黑';position: absolute;right: 0;top: 0;color: #fff;}
  .myShop{height: 100vh;}
  .huizhang{width: 0.30rem;height:0.3rem;border-radius: 50%;background-color: #F43711;text-align: center;font-size: 0.16rem;color: #F5F5F5;position: absolute;right:0.2rem;top:0.2rem;overflow: inherit;line-height: 0.3rem;}
  .contentNav{height:calc(100vh - 46px);overflow-y: scroll;}

  .peopleMessage{padding: 0.2rem 0;}
  .peopleMessage .mPic{width:0.7rem;height: 0.7rem;border-radius: 50%;overflow: hidden;float: left;display: block;}
  .peopleMessage .news{float: left;margin-left: 0.21rem;}
  .peopleMessage .news h3{font: 0.24rem/0.35rem '微软雅黑';color: #4AACE9;width: 1.9rem}
  .peopleMessage .news p{font: 0.2rem/0.35rem '微软雅黑';color:#999999;}
  .peopleMessage .news p img{display: inline-block;width:0.24rem;height: 0.24rem;}

  .shopMessage{padding: 0.15rem;background-color: #f7f7f7;}
  .shopMessage img{width: 0.95rem;height: 0.95rem;border-radius: 0.04rem;display: inline-block;float: left;}
  .shopMessage .name{font: 0.26rem/0.3rem '微软雅黑';color: #000;margin: 0.05rem 0 0.23rem 0.22rem;float: left;}
  .shopMessage .name p{display: inline-block;max-width:60%;}
  .shopMessage .price{color: #F88222;font-size: 0.34rem;line-height: 0.4rem;margin-top:0.13rem;}
  
  .btn{margin: 0.21rem 0;}
  .btn .btnCommon{width: 0.87rem;height: 0.36rem;line-height: 0.36rem;border:1px solid #cccccc;border-radius: 0.18rem;text-align: center;color: #cccccc;font-size:0.26rem;float: right;margin-left: 0.21rem;}
</style>
